<template>
  <div class="success-cases">
    <div class="index-title">成功案例</div>
    <div class="index-content">
      <div
        class="index-content-item"
        @mouseover="overMask(index)"
        @mouseout="outMask(index)"
        v-for="(item, index) in casesList"
        :key="index"
      >
        <div class="cases-title-img">
          <img :src="item.imgUrl" alt="" ref="casesImgRef" />
          <div class="cases-title" ref="casesTitleRef">{{ item.title }}</div>
          <div class="cases-mask" ref="casesMaskRef">
            <div class="mask-title">{{ item.title }}</div>
            <div class="mask-txt">
              <div class="mask-txt1">{{ item.txt1 }}</div>
              <div class="mask-txt2">{{ item.txt2 }}</div>
            </div>
            <div class="mask-button">查看更多案例</div>
          </div>
        </div>
        <div class="cases-classification">
          <div
            class="cases-item"
            v-for="(item2, index) in item.classification"
            :key="index"
          >
            <div class="cases-item-img" :style="bgStyle(item2.imgUrl)"></div>
            <div class="cases-item-txt" ref="casesItemTxt">{{ item2.txt }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { bgStyle } from "../../utils/common.js";
const casesList = ref([
  {
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
    title: "APP设计开发",
    txt1: "功能丰富：可实现更加复杂和完善的服务和用户体验，如社交、广告等",
    txt2: "用户粘性强：可以通过推送个性化推荐、消息提醒等方式，提高用户忠诚度",
    classification: [
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
    ],
  },
  {
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
    title: "APP设计开发",
    txt1: "功能丰富：可实现更加复杂和完善的服务和用户体验，如社交、广告等",
    txt2: "用户粘性强：可以通过推送个性化推荐、消息提醒等方式，提高用户忠诚度",
    classification: [
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
    ],
  },
  {
    imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
    title: "APP设计开发",
    txt1: "功能丰富：可实现更加复杂和完善的服务和用户体验，如社交、广告等",
    txt2: "用户粘性强：可以通过推送个性化推荐、消息提醒等方式，提高用户忠诚度",
    classification: [
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
      {
        imgUrl: "https://cdn.leweisoft.com/mh/website/lewei/cases-app-main.png",
        txt: "乐抓",
      },
    ],
  },
]);
const casesMaskRef = ref();
const casesTitleRef = ref();
const casesItemTxt = ref();
const casesImgRef = ref();
function overMask(index) {
  for (let i = 0; i < casesTitleRef.value.length; i++) {
    if (i == index) {
      casesTitleRef.value[i].style.opacity = "0";
      casesMaskRef.value[i].style.opacity = "1";
      casesImgRef.value[i].style.transform = "scale(1.2)";
    }
  }
  casesItemTxt.value.forEach((item, i) => {
    if (index * 3 <= i && i < (index + 1) * 3) {
      item.style.color = "#497bff";
    }
  });
}
function outMask(index) {
  for (let i = 0; i < casesTitleRef.value.length; i++) {
    if (i == index) {
      casesTitleRef.value[i].style.opacity = "1";
      casesMaskRef.value[i].style.opacity = "0";
      casesImgRef.value[i].style.transform = "scale(1)";
    }
  }
  casesItemTxt.value.forEach((item) => {
    item.style.color = "#333";
  });
}
</script>
<style scoped lang="less">
.success-cases {
  width: 62.016vw;
  margin: 0 auto;

  .index-title {
    font-size: 2.067vw;
    padding: 5.168vw 0 4.083vw;
    font-weight: 700;
    text-align: center;
  }
  .index-content {
    cursor: pointer;
    .index-content-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 3.101vw;

      .cases-title-img {
        position: relative;
        width: 18.708vw;
        height: 19.225vw;
        overflow: hidden;
        border-radius: 1.034vw;
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .cases-title {
          position: absolute;
          left: 1.447vw;
          width: 3vw;
          white-space: nowrap;
          font-size: 1.137vw;
          border-bottom: #497bff 0.2vw solid;
          color: #fff;
          padding: 14.367vw 0 0.7vw 0;
        }
        .cases-mask {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          width: 18.708vw;
          height: 19.225vw;
          border-radius: 1.034vw;
          background-color: #0000009f;
          .mask-title {
            font-size: 1.137vw;
            color: #fff;
            font-weight: 700;
            padding: 4.393vw 0 1.55vw 1.447vw;
          }
          .mask-txt {
            .mask-txt1,
            .mask-txt2 {
              font-size: 0.724vw;
              color: #fff;
              padding: 0 3.824vw 0 1.447vw;
              margin-bottom: 1.034vw;
            }
          }
          .mask-button {
            width: 7.39vw;
            height: 1.654vw;
            line-height: 1.654vw;
            margin: 2.532vw 0 0 1.447vw;
            background-color: #497bff;
            color: #fff;
            font-size: 0.724vw;
            text-align: center;
            border-radius: 0.258vw;
            cursor: pointer;
          }
        }
      }
      .cases-classification {
        width: 36.176vw;
        height: 19.276vw;
        display: flex;
        justify-content: space-between;
        .cases-item-img {
          width: 7.752vw;
          height: 14.987vw;
          margin: 1.395vw 0 0.775vw 0;
        }
        .cases-item-txt {
          font-size: 0.724vw;
          color: #333;
          text-align: center;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
